#player-tmp {
  padding: 0;
  padding-right: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;

  // 左边播放器按钮部分
  .player-btn {
    width: 160px;
    padding-right: 5px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    // 设置不可选择
    -webkit-user-select: none;
    -moz-user-select: none;

    .mobile-playMode,
    .mobile-playList {
      display: none;
    }

    &>div {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-left: 20px;
      color: #cbcbcb;
      font-size: 13px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: transparent;
      box-shadow: 3px 3px 7px rgba(66, 66, 66, 0.459), -3px -3px 7px rgba(150, 150, 150, 0.376);
      cursor: pointer;
      transition: 0.3s;

      &:hover {
        color: #fff;
      }

      &:active {
        box-shadow: inset 3px 3px 7px rgba(66, 66, 66, 0.459), inset -3px -3px 7px rgba(150, 150, 150, 0.376);
      }
    }

    // 播放按钮变大
    &>div:nth-child(3) {
      width: 40px;
      height: 40px;
      font-size: 24px;
    }
  }

  // 中间音乐进度条部分
  .aplayer {
    flex: 1;
    // 去除阴影和背景色
    background: initial;
    box-shadow: none;

    .aplayer-body .aplayer-info {
      // 去除下划线
      border: none;
      height: 45px;
      padding: 0 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .aplayer-music {
        flex-grow: 0;
        height: 20px;
        margin-bottom: 5px;
      }

      .aplayer-controller {
        display: initial;
        position: relative;

        // 未读进度条样式
        .aplayer-bar {
          position: relative;
          background: #a3a3a3;
          height: 3px;

          // 用伪类元素扩充进度条可点击范围
          &::before {
            content: "";
            width: 100%;
            height: 19px;
            position: absolute;
            top: -7px;
            background: rgba(255, 0, 0, 0);
            z-index: 1;
          }

          // 去除缓冲条
          .aplayer-loaded {
            display: none;
          }

          // 已读进度条样式
          .aplayer-played {
            height: 100%;
            background: #fff !important;

            // 进度球样式
            .aplayer-thumb {
              // position: relative;
              border-color: #fff !important;
              // border: none !important;
              width: 15px;
              height: 15px;
              margin-top: -7px;

              &:hover {
                background: #fff !important;
              }

              &::after {
                // content: "";
                width: 100%;
                height: 14px;
                position: absolute;
                top: 0;
                left: 0;
                background: red;
              }
            }
          }
        }

        // 时间样式
        .aplayer-time {
          position: absolute;
          right: 0;
          top: -24px;
          font-size: 14px;

          .aplayer-time-inner {

            // 去除文本节点里第一个短杠
            &::first-letter {
              font-size: 0px;
            }

            // 当前时长文字样式
            color: #fff;

            // 歌曲总时长文字样式
            .aplayer-dtime {
              color: #ccc;
            }
          }
        }
      }
    }

    // 歌曲名
    .aplayer-title {
      color: #fff;

      // 歌曲和歌手名之间加一个短杠
      &::after {
        content: " - ";
      }
    }

    // 歌手名
    .aplayer-author {
      color: #fff;
      position: relative;
      top: 0.5px;
    }

    .aplayer-author,
    .aplayer-title {
      font-size: 14px;
    }

    // 去除多余的部件
    .aplayer-pic,
    .aplayer-volume-wrap,
    .aplayer-time button {
      display: none;
    }
  }

  // 右边音量部分
  .player-volume {
    width: 200px;
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #cbcbcb;
    // 设置不可选择
    -webkit-user-select: none;
    -moz-user-select: none;

    &>div:not(:last-child) {
      width: 30px;
      height: 30px;
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      background: transparent;
      box-shadow: 3px 3px 7px rgba(66, 66, 66, 0.459), -3px -3px 7px rgba(150, 150, 150, 0.376);
      white-space: nowrap;
      cursor: pointer;
      transition: 0.3s;

      &:hover {
        color: #fff;
      }

      &:active {
        box-shadow: inset 3px 3px 7px rgba(66, 66, 66, 0.459), inset -3px -3px 7px rgba(150, 150, 150, 0.376);
      }
    }

    .volume-bar {
      width: 40%;
      height: 100%;
      cursor: pointer !important;

      // mintUI range 控件总高度
      /*
      .mt-range {
        height: 2px;

        .mt-range-content {
          height: 2px;
          margin-right: 0;
        }

        .mt-range-runway {
          height: 1px;
          right: 0;
          background: #acadad;
          border: none;
        }

        .mt-range-progress {
          background: #41b883;
        }

        .mt-range-thumb {
          position: relative;
          top: -3px;
          width: 7.5px;
          height: 7.5px;
          cursor: pointer;
          box-shadow: none;
          border: 1px solid #41b883;

          // 用一个伪类扩大父元素可触发hover的面积
          &::before {
            content: "";
            position: absolute;
            left: -50%;
            top: -50%;
            width: 200%;
            height: 200%;
            transform: scale(2);
            background: rgba(255, 0, 0, 0);
          }

          &:hover {
            transform: scale(1.2);
            background: #41b883;
          }
        }
      }
      */

      // 修改Element UI slider组件样式

      .el-slider {
        .el-slider__runway {
          position: relative;
          height: 2px;

          &::after {
            content: "";
            position: absolute;
            left: 0;
            top: -6px;
            width: 100%;
            height: 14px;
            background: rgba(255, 0, 0, 0);
          }

          .el-slider__bar {
            height: 2px;
            background: #41b883;
            background: #fff;
            transition: 0.1s;
          }

          .el-slider__button-wrapper {
            top: -17px;
            transition: 0.1s;
            cursor: pointer !important;

            .el-tooltip.el-slider__button {
              width: 7.5px;
              height: 7.5px;
              border: 1px solid #fff;
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  // 菜单
  .v-modal {
    background: #000 !important;
  }

  .el-drawer__wrapper {
    display: none;
  }
}

@media screen and (max-width: 1000px) {
  #player-tmp {
    margin-bottom: 20px;
    padding: 0;
    flex-direction: column;
    justify-content: flex-start;

    // 左边播放器按钮部分
    .player-btn {
      order: 1;
      width: 100%;
      padding-right: 0;
      display: flex;
      justify-content: space-evenly;


      &>div {
        width: 60px;
        height: 60px;
        margin-left: 0px;
        font-size: 38px;
      }

      .mobile-playMode,
      .mobile-playList {
        display: block;
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 35px;
      }

      // 播放/暂停按钮
      &>div:nth-child(3) {
        width: 80px;
        height: 80px;
        font-size: 55px;
      }
    }

    // 中间音乐进度条部分
    .aplayer {
      width: calc(100% - 80px);
      overflow: visible;

      .aplayer-body .aplayer-info {
        flex-direction: column;
        justify-content: center;
        margin-bottom: 20px;
        overflow: visible;

        .aplayer-music {
          flex-grow: 0;
          height: 20px;
          margin-bottom: 5px;
        }

        .aplayer-controller {

          // 未读进度条样式
          .aplayer-bar {
            background: rgba(163, 163, 163, 0.356);

            // 用伪类元素扩充进度条可点击范围
            &::before {
              content: "";
              width: 100%;
              height: 19px;
              position: absolute;
              top: -7px;
              background: rgba(255, 0, 0, 0);
            }

            // 去除缓冲条
            .aplayer-loaded {
              display: none;
            }

            // 已读进度条样式
            .aplayer-played {

              // 进度球样式
              .aplayer-thumb {
                width: 11px;
                height: 11px;
                margin-top: -5px;
              }
            }
          }

          // 时间样式
          .aplayer-time {
            position: absolute;
            left: -48px;
            top: -3px;
            font-size: 0px;
            width: calc(100% + 79px);

            .aplayer-time-inner {
              width: 100%;
              color: transparent;
              display: flex;
              justify-content: flex-start;

              // 去除文本节点里第一个短杠
              &::first-letter {
                font-size: 0px;
              }

              font-size: 13px;

              // 当前时长文字样式
              .aplayer-ptime {
                color: rgba(180, 180, 180, 0.74);
                flex: 1;
              }

              // 歌曲总时长文字样式
              .aplayer-dtime {
                color: rgba(180, 180, 180, 0.74);
              }
            }
          }
        }
      }

      // 歌曲名
      .aplayer-title {
        display: none;
      }

      // 歌手名
      .aplayer-author {
        display: none;
      }
    }

    // 右边音量部分
    .player-volume {
      display: none !important;
    }

    // 手机端播放列表
    .el-drawer__wrapper {
      display: block;

      .el-drawer {
        background: transparent;
        box-shadow: none;

        .el-drawer__body {

          .swiper-container {
            width: 100%;
            padding-top: 20px;
            background: transparent;

            .swiper-wrapper {

              .swiper-slide {

                &>div {
                  width: 94%;
                  height: calc(100% - 30px);
                  margin-left: 3%;
                  border-radius: 15px;
                  // overflow: hidden;
                  position: relative;
                  background: #ffffff7e;
                  backdrop-filter: blur(20px);

                  // 轮播模块头部
                  .title {
                    margin-bottom: 20px;
                    padding: 20px 25px;
                    font-size: 23px;
                    font-weight: bold;
                    display: flex;
                    align-items: center;

                    span {
                      flex: 1;
                    }

                    b {
                      font-size: 16px;
                      font-weight: initial;
                      color: #696969;
                    }

                    .el-icon-delete {
                      color: #696969;
                      font-size: 25px;
                    }
                  }

                  .music-list {

                    &>span {
                      display: block;
                      padding: 0 25px;
                      height: 57vh;
                      overflow-y: scroll;

                      li {
                        list-style: none;
                        height: 60px;
                        display: flex;
                        align-items: center;
                        color: #696969;

                        // 当前播放歌曲高亮样式
                        &.highLight {
                          color: #fff;
                        }

                        .name {
                          font-size: 20px;
                          flex: 1;
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;

                          .artist {
                            font-size: 16px;
                            color: inherit;
                          }
                        }

                        // 删除图标
                        .el-icon-close {
                          color: inherit;
                          font-size: 23px;
                        }
                      }

                    }


                  }
                }
              }
            }

            .swiper-pagination-bullets {
              bottom: auto;
              top: 0;

              // 默认样式
              .swiper-pagination-bullet {
                background: #ffffff62;
                opacity: 1;
              }

              // 触发样式
              .swiper-pagination-bullet-active {
                background: #fff;
              }
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 600px) {
    #player-tmp {
      margin-top: -30px;

      // 左边播放器按钮部分
      .player-btn {

        &>div {
          width: 40px;
          height: 40px;
          font-size: 25px;
        }

        .mobile-playMode,
        .mobile-playList {
          width: 40px;
          height: 40px;
          font-size: 24px;
        }

        // 播放/暂停按钮
        &>div:nth-child(3) {
          width: 50px;
          height: 50px;
          font-size: 35px;
        }
      }

      .aplayer {
        .aplayer-body .aplayer-info {
          .aplayer-controller {

            // 时间样式
            .aplayer-time {
              .aplayer-time-inner {
                font-size: 12px;
              }
            }
          }
        }
      }

      // 手机端播放列表
      .el-drawer__wrapper {

        .el-drawer {
          background: transparent;
          box-shadow: none;

          .el-drawer__body {

            .swiper-container {
              padding-top: 20px;
              background: transparent;

              .swiper-wrapper {
                .swiper-slide {
                  &>div {
                    width: 94%;
                    height: calc(100% - 16px);
                    margin-left: 3%;
                    border-radius: 15px;
                    background: #ffffff7e;
                    backdrop-filter: blur(20px);

                    // 轮播模块头部
                    .title {
                      margin-bottom: 0px;
                      padding: 10px 15px;
                      font-size: 17px;

                      b {
                        font-size: 12px;
                      }

                      .el-icon-delete {
                        font-size: 20px;
                      }
                    }

                    .music-list {
                      height: 90%;
                      padding: 0;

                      &>span {
                        height: 63vh;
                        padding: 0 15px;

                        li {
                          list-style: none;
                          height: 50px;


                          .name {
                            font-size: 15px;

                            .artist {
                              font-size: 12px;
                              line-height: 20px;
                            }
                          }

                          // 删除图标
                          .el-icon-close {
                            font-size: 18px;
                          }
                        }
                      }
                    }
                  }
                }
              }

              .swiper-pagination-bullets {
                bottom: auto;
                top: 0;

                // 默认样式
                .swiper-pagination-bullet {
                  background: #ffffff62;
                  opacity: 1;
                }

                // 触发样式
                .swiper-pagination-bullet-active {
                  background: #fff;
                }
              }
            }
          }
        }
      }
    }
  }
}
